<template>
  <div>
    <div class="fixHead">
      <div class="title">
        <span class="iconfont icon-jiantou" @click="$router.go(-1)"></span>
        <span class="icon-home" @click="$router.push('/')"></span>
        <h1>文章详情</h1>
        <span class="rightBtn" v-if="isCreater == true" @click="show = true"
          >•••</span
        >
      </div>
      <div style="height: 0.88rem;"></div>
    </div>
    <div class="articleDe">
      <div class="title">蚂蚁金服是一家怎样的公司呢？麻小云有话说</div>
      <div class="people">
        <img src="../../assets/images/adver.jpg" />
        <span>麻小云</span>
      </div>
      <div class="card">
        <img class="head" src="../../assets/images/adver.jpg" />
        <div class="cont">
          <div class="name line1">麻小云</div>
          <div class="txt line1">
            阿里巴巴创始人/慈善会会长/蚂蚁阿里巴巴创始人/慈善会会长/蚂蚁
          </div>
        </div>
        <div class="btn" @click="scrollTo">联系ta</div>
      </div>
      <div class="artCont">
        <div class="item">
          <div class="txt">
            我所在的西北城市对春天的感觉总是处于后知后觉的状态。告别了黑黝黝望不到边的寒冬和一场接一场大大小小的考试，此时的心情也随着天气一天一天变好而舒展开来。
          </div>
        </div>
        <div class="item">
          <img src="../../assets/images/adver.jpg" />
        </div>
        <div class="item">
          <AudioPlayer :audio-list="audioList" />
        </div>
        <div class="item">
          <video controls="controls">
            <source
              src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
              type="video/mp4"
            />
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </div>
    <div class="myCard" id="box1">
      <div class="linkTip">联系Ta, 了解更多详情</div>
      <div :class="['card', { cardBg: has }]">
        <div class="wrap">
          <div class="top">
            <img class="head" src="../../assets/images/adver.jpg" />
            <div class="info">
              <div class="name">
                <span>麻小云</span>
              </div>
              <div class="des">阿里巴巴创始人/慈善会会长/蚂蚁金服执行董事</div>
            </div>
          </div>
          <div class="link">
            <div class="item">
              <img class="icon" src="../../assets/images/mkf/link1.png" />
              <span class="name1">手机:</span>
              <span class="name2">15512345678</span>
              <span class="btn">拨打</span>
            </div>
            <div class="item">
              <img class="icon" src="../../assets/images/mkf/link2.png" />
              <span class="name1">邮箱:</span>
              <span class="name2">15512345678@qq.com</span>
              <span class="btn">复制</span>
            </div>
            <div class="item">
              <img class="icon" src="../../assets/images/mkf/link3.png" />
              <span class="name1">微信:</span>
              <div class="qrcode">
                <div><img src="../../assets/images/kefu.jpg" /></div>
                <p>扫码加好友</p>
              </div>
            </div>
          </div>
          <div class="txt">
            我们的本质都是自己的英雄。在生命中很多日子里，不得不被或主动看清自己平凡小弱的事实，但在真相之后，我们依旧紧握梦想，勇敢地追求更好的自己。这件事本身就充满了意义。
          </div>
        </div>
      </div>
      <!-- 有社群 -->
      <div class="card2" v-if="has">
        <img src="../../assets/images/adver.jpg" />
        <div class="right">
          <p class="line1">蚂蚁金服</p>
          <p class="line2">每一个认真生活的人，都值得被认真对待</p>
        </div>
      </div>
    </div>

    <!--要转成canvas的DOM    -->
    <div
      class="poster"
      id="poster"
      ref="poster"
      style="position: fixed;top: -3000px;"
    >
      <div class="mkf">
        <img src="../../assets/logo.png" />
        <p>脉客蜂</p>
      </div>
      <div class="pArt">
        <div class="title">蚂蚁金服是一家怎样的公司呢？麻小云有话说</div>
        <div class="txt">
          城市对春天的感觉总是处于后知后觉的状态。告别了黑黝黝望不到边的寒冬和一场接一场大大小小的考试，
          此时的心情也随着天气一天一天变好而舒展开来。我们都是这样地笃定，这样的坚持。周围所有事物仿佛也因为我们这样的态度变得和蔼可
          亲起来。年轻且跃跃欲试的心，蓬勃又自信满满的状态，仿佛明日世界上出现的同一个太阳，都是为我们
        </div>
      </div>
      <div class="card">
        <div class="top">
          <img class="head" src="../../assets/images/adver.jpg" />
          <div class="cont">
            <div class="name line1">麻小云</div>
            <div class="txt line1">
              阿里巴巴创始人/慈善会会长/蚂蚁阿里巴巴创始人/慈善会会长/蚂蚁
            </div>
          </div>
        </div>
        <div class="bottom" v-if="has == true">
          <img class="head" src="../../assets/images/adver.jpg" />
          <p class="line1">蚂蚁金服</p>
        </div>
      </div>
      <div class="code">
        <div><img src="../../assets/images/kefu.jpg" /></div>
        <p>扫码了解更多</p>
      </div>
    </div>

    <div style="height: 1.7rem;"></div>

    <div class="btns">
      <div class="star" @click="star = !star">
        <img src="../../assets/images/mkf/star2.png" v-if="!star" />
        <img src="../../assets/images/mkf/star.png" v-if="star" />
        <span>{{ star ? "已收藏" : "收藏" }}</span>
      </div>
      <div class="share" @click="poster">生成分享海报</div>
      <div class="download">立即下载</div>
    </div>

    <router-link class="writeBtn" :to="'/user/publish'">写文章</router-link>
    <div class="changeBtn" @click="change">换成我的名片<br />(￥9.99)</div>
    <!-- 操作 -->
    <yd-actionsheet :items="myItems" v-model="show"></yd-actionsheet>

    <yd-popup
      v-model="show1"
      position="center"
      width="100%"
      masker-opacity="0.8"
    >
      <div class="posterPopup">
        <img
          class="close"
          src="../../assets/images/mkf/close2.png"
          @click="show1 = false"
        />
        <img class="mainImg" :src="dataURL" />
        <div class="ope">
          <img class="item" src="../../assets/images/mkf/shareBtn_wx.png" />
          <img class="item" src="../../assets/images/mkf/shareBtn_pyq.png" />
          <img
            class="item2"
            src="../../assets/images/mkf/shareBtn_save.png"
            @click="downloadNow"
          />
        </div>
      </div>
    </yd-popup>
  </div>
</template>

<script>
import { AudioPlayer } from "@liripeng/vue-audio-player";
import "@liripeng/vue-audio-player/lib/vue-audio-player.css";
import { ActionSheet } from "vue-ydui/dist/lib.rem/actionsheet";
import { Popup } from "vue-ydui/dist/lib.rem/popup";
import html2canvas from "html2canvas";
export default {
  name: "",
  components: {
    AudioPlayer,
    ydActionsheet: ActionSheet,
    ydPopup: Popup
  },
  props: {},
  data: function() {
    return {
      show1: false,
      isCreater: true,
      star: false,
      has: true, //有无社群
      show: false, //右上角...
      myItems: [],
      audioList: [
        "http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
      ],
      dataURL: ""
    };
  },
  mounted: function() {
    this.myItems = [
      {
        label: "删除",
        callback: () => {
          this.confirmFn();
        }
      }
    ];
  },
  methods: {
    confirmFn() {
      this.$dialog.confirm({
        title: "是否确认删除？",
        mes: "",
        opts: [
          {
            txt: "取消",
            color: "#999999",
            stay: false, //是否保留提示框
            callback: () => {
              console.log("取消");
            }
          },
          {
            txt: "确认",
            color: "#deaa8a",
            stay: false,
            callback: () => {
              console.log("执行删除");
            }
          }
        ]
      });
    },
    scrollTo() {
      document.getElementById("box1").scrollIntoView();
    },
    change() {
      var title = "该文章仅限本社群成员转换"; //付费转换仅限VIP参与、您还有2次免费转化/发布机会、您的免费次数已用完
      var mes = "您非本社群成员"; //开通VIP转换/编辑不限量，更有超多特权
      var btn1 = "取消"; //试用看看
      var btn2 = "查看社群"; //查看VIP特权
      this.$dialog.confirm({
        title: title,
        mes: mes,
        opts: [
          {
            txt: btn1,
            color: "#999999",
            stay: false, //是否保留提示框
            callback: () => {
              //按钮回调函数
              console.log("取消");
            }
          },
          {
            txt: btn2,
            color: "#deaa8a",
            stay: false,
            callback: () => {
              // this.$router.push({
              //   path: "/com/home"
              // });
              // this.$router.push({
              //   path: "/user/vip"
              // });
            }
          }
        ]
      });

      // this.$router.push({
      //   path: "/user/publish2"
      // });
    },
    poster() {
      window.pageYOffset = 0;
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      this.$dialog.loading.open("正在生成中...");
      html2canvas(this.$refs.poster, {
        backgroundColor: "#2a2631"
      }).then(canvas => {
        let dataURL = canvas.toDataURL("image/png");
        this.dataURL = dataURL;
        this.$dialog.loading.close();
        this.show1 = true;
      });
    },
    downloadNow() {
      var saveLink = document.createElement("a");
      saveLink.href = this.dataURL;
      saveLink.download = "downLoad.png";
      saveLink.click();
    }
  }
};
</script>

<style scoped>
.btns {
  width: 100%;
  height: 1rem;
  line-height: 0.99rem;
  text-align: center;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #2a2631;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10 !important;
}
.btns .star {
  flex: 1.1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.btns .star img {
  display: block;
  width: 0.36rem;
  height: 0.36rem;
}
.btns .star span {
  font-size: 0.2rem;
  line-height: 0.24rem;
  color: #999999;
  padding-top: 0.1rem;
}
.btns .share {
  flex: 2.8;
  height: 100%;
  background-color: #4e464b;
  font-size: 0.28rem;
  font-weight: bold;
  color: #deaa8a;
}
.btns .download {
  flex: 3.6;
  height: 100%;
  background-color: #deaa8a;
  font-size: 0.28rem;
  font-weight: bold;
  color: #000000;
}

.fixHead .title {
  background: #2a2631;
}
.myCard {
  padding-top: 0.32rem;
}
.myCard .linkTip {
  color: #999999;
  font-size: 0.28rem;
  line-height: 0.32erm;
  padding: 0 0.2rem;
  text-align: right;
  padding-bottom: 0.2rem;
}
.myCard .card.cardBg {
  margin-bottom: 0;
  background: url(../../assets/images/mkf/articleBg.png) bottom left no-repeat;
  background-size: 7.1rem auto;
  background-position-y: 3rem;
}
.myCard .card .wrap {
  padding-bottom: 0.2rem;
}
.myCard .card .wrap .link {
  padding: 0.3rem 0 0 0.36rem;
}
.myCard .card .wrap .link .item {
  margin-bottom: 0.24rem;
}
.myCard .card .wrap .link .item:last-child {
  margin-bottom: 0.3rem;
}
.myCard .card .wrap .link .item .name2 {
  display: block;
  width: 3.74rem;
}
.myCard .card .wrap .link .item .name1 {
  width: 0.68rem;
}
.myCard .card .wrap .link .item .btn {
  display: block;
  width: 1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  text-align: center;
  background-color: #2a2631;
  border-radius: 0.06rem;
  font-size: 0.24rem;
  color: #deaa8a;
}
.card2 {
  border-radius: 0px 0.4rem 0.2rem 0.2rem;
  background-color: #4e464b;
  padding: 0.3rem;
  display: flex;
  position: relative;
  z-index: 1;
  top: -0.2rem;
  width: 7.3rem;
  margin-left: 0.2rem;
}
.card2 > img {
  display: inline-block;
  width: 1.22rem;
  height: 1.22rem;
  background-color: #d6d6d6;
  border-radius: 0.2rem;
  margin: 0 0.3rem;
  object-fit: cover;
}
.card2 .right {
  width: 4.86rem;
  padding-right: 0.2rem;
}
.card2 .right p:first-child {
  font-size: 0.36rem;
  line-height: 0.52rem;
  color: #ffffff;
  font-weight: bold;
}
.card2 .right p:last-child {
  padding-top: 0.08rem;
  font-size: 0.28rem;
  line-height: 0.32rem;
  color: #999999;
}
</style>
<style>
.audio-player {
  margin: 0 auto;
  background-color: #32303a;
  border-radius: 0.1rem;
  height: 1.2rem;
  padding: 0 0.3rem;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.audio-player .audio__progress-wrap {
  width: 5.4rem;
  margin: 0;
  background-color: #2a2631;
}
.audio-player .audio__progress-wrap .audio__progress {
  background-color: #ffffff;
}
.audio-player .audio__progress-wrap .audio__progress-point {
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background-color: #fff;
  box-shadow: none;
}
.audio-player .audio__progress-wrap .audio__progress-point:after {
  width: 0;
  height: 0;
}
.audio-player .audio__time-wrap {
  width: 5.4rem;
  position: absolute;
  bottom: 0.24rem;
  left: 0.3rem;
  margin: 0;
}
.audio-player .audio__time-wrap .audio__duration,
.audio-player .audio__time-wrap .audio__current-time {
  color: #666666;
  font-size: 0.2rem;
}
.audio-player .audio__btn-wrap .audio__play--previous,
.audio-player .audio__btn-wrap .audio__play--next {
  display: none;
}
.audio-player .audio__btn-wrap {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  top: 0.2rem;
  right: 0.3rem;
}
.audio-player .audio__btn-wrap .audio__play--start,
.audio-player .audio__btn-wrap .audio__play--pause {
  width: 0.8rem;
  height: 0.8rem;
  margin: 0;
}
.audio-player .audio__btn-wrap .audio__play__icon {
  color: #deaa8a;
}
.yd-actionsheet {
  background-color: #32303a;
}
.yd-actionsheet-item {
  background-color: #32303a;
  height: 1.2rem;
  line-height: 1.2rem;
  font-size: 0.32rem;
  color: #999999;
}
.yd-actionsheet-item:after {
  background: rgba(255, 255, 255, 0.1);
}
</style>
